<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      span {
        color: black;
      }
    </style>
  </head>
  <body>
    <form action="https://www.houdunren.com" id="form">
      用户名:<input type="text" name="user" />
      <hr />
      <input type="checkbox" name="copyright" id="" />接受协议
      <hr />
      <button>submit</button>
    </form>

    <span id="msg"></span>
  </body>
</html>
<script>
  /*
        const span = document.querySelector('#spn')
        document.querySelector('[name=age]').addEventListener('keyup', function() {
            span.innerHTML =  this.value >= 90 ? "年龄不可以超过90岁!" : ""
        })
    */

  /*
    function query(name) {
        return document.querySelector(`[name = ${name}]`);
    }

    let allInput = document.querySelectorAll(
        "[name = password], [name = confirm_password]"
    );

    [...allInput].map((e) => {
        e.addEventListener("keyup", function () {
        let msg = "";
        if (
            query("password").value != query("confirm_password").value ||
            query("password").value.length > 5
        ) {
            msg = "两次密码不一致或密码长度小于五位";
        }

        query("msg").innerHTML = msg;
        });
    });
  */

  function query(el) {
    return document.querySelector(el);
  }

  let user = query("[name='user']");
  let copyright = query("[name='copyright']").checked;
  // document.querySelector这种选择器选 input元素的时候 需要[name = 'user']
  document.querySelector("#form").addEventListener("submit", function (e) {
    if (!user.value.trim() || !copyright) {
      e.preventDefault();
      alert("请提交完整信息");
    }
  });

  let spanMsg = query("#msg");
  let msg = "";

  user.addEventListener("keyup", function () {
    let inputLength = this.value.length;
    if (inputLength > 10) {
      msg = "密码超级无敌安全!!!";
    } else if (inputLength > 5) {
      msg = "密码中等安全";
    } else {
      msg = "密码有点弱埃";
    }
    spanMsg.innerHTML = msg;
  });

  function star(row = 5) {
    let start = 0;
    do {
      let n = 0;
      do {
        document.write("*");
      } while (++n <= start);

      document.write(`</br>`);
    } while (++start <= row);
  }

  //   star();

  function hd() {
    for (let i = 1; i < 5; i++) {
      for (let n = 5 - i; n > 0; n--) {
        document.write(`<sapn>^</span>`);
      }
      for (let m = i * 2 - 1; m > 0; m--) {
        document.write("*");
      }
      document.write("<br/>");
    }
  }
  hd();
</script>
